<template>
    <div class="app-contain">
        <el-form label-width="110px" class="app-content" :rules="rules" :model="ruleForm2" ref="ruleForm2" label-position='left'>
            <el-row class="boxTop">                
                <el-col :span="15">本页需要上传事业单位法人证书法人手持身份证的正反面照片，若在上一步您上传的是委托书，则需要上传“被委托人”的手持身份证正反面照片。</el-col>
                <el-col :span="3" :offset="6" class="hotLine">客服热线 400-6002-588</el-col>
            </el-row>
            <div class="appTop"><P>手持身份证照片（正反面）</p></div>
            <el-row class="boxContent">                
                <el-row>
                    <el-col :span="18" class='require'>
                        <p>身份证照上传要求：</p>
                        <p>1.确保身份证上的信息没有被遮挡，内容清晰可见，不得做任何修改；</p>
                        <p>2.避免证件与头部重叠，五官可见，完全露出双手手臂；</p>
                        <p>3.支持png、jpg、bmp等不大于 8M 的照片；</p>
                        <div class="clickImg" @click="clickImg1">
                            <img :src="urlImg1"/>
                        </div>
                        <p class='imgAddBig'>示例图（点击可放大）</p>
                    </el-col>
                </el-row>
                <el-row class='mTop'>
                    <el-col :span="5">               
                        <img-upload v-model="ruleForm2.sCardFace" :imageSize="8" :showFileName="true"></img-upload>
                        <span class='imageNote'>正面照</span>
                    </el-col>
                    <el-col :span="5">
                        <img-upload v-model="ruleForm2.sCardBack" :imageSize="8" :showFileName="true"></img-upload>
                        <span class='imageNote'>反面照</span>
                    </el-col>
                </el-row>
            </el-row>

            <div class="appTop Top"><P>法人/被委托人身份信息</p></div>
            <el-row class="boxTop">                
                <el-col :span="15">请根据您所上传的身份证信息填写以下内容。</el-col>
            </el-row>
            <el-row>               
                <el-col :span="12">
                    <el-form-item label="姓名" prop="wTname">
                        <el-input v-model="ruleForm2.wTname" placeholder="请输入姓名" :maxlength="6"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>               
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="identity">
                        <el-input v-model="ruleForm2.identity" placeholder="请输入身份证号" :maxlength="18"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-dialog title="手持身份证照片（正反面）" :visible.sync="dialogFormVisible" size="tiny">
            <div class='checkImg'><img :src="bigImgUrl"/></div>
        </el-dialog>
    </div>
</template>

<script>
import imgUpload from 'components/Upload/imgUpload';
export default{
    components: {imgUpload},
    props: {
        ruleForm2: {
            type: Object,
            required: true
        }
    },
    data() {
        return { 
            urlImg1: 'http://test.img.juziwl.cn/exue/20171116/18cb8515467d4b09ba6f49dbd81f2cb5.png',
            bigImgUrl: '',
            dialogFormVisible: false,
            rules: {
                wTname: [
                    { required: true, message: '请输入姓名', trigger: 'blur'},
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                identity: [
                    { required: true, message: '请输入身份证号码', trigger: 'blur'},
                    { pattern: /(^\d{15}$)|(^\d{17}(\d|X)$)/, message: '身份证号码不合法', trigger: 'blur'}
                ]
            }

        }
    },
    methods: {
        // 提交
        submitForm() {
            this.$refs['ruleForm2'].validate((valid) => {
                if (valid) {
                    if (this.ruleForm2.sCardFace=='') {
                        this.ruleForm2.judge = false;
                        this.$message({
                            type: 'warning',
                            message: '请上传身份证正面照'
                        });
                        return;
                    } else if (this.ruleForm2.sCardBack=='') {
                        this.ruleForm2.judge = false;
                        this.$message({
                            type: 'warning',
                            message: '请上传身份证反面照'
                        });
                        return
                    } else {
                        this.$emit('getSubmitIdfy', 'true');
                    }
                }
            });
        },
        // 点击放大
        clickImg1() {
            this.dialogFormVisible = true;
            this.bigImgUrl = this.urlImg1;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    .el-form{
        padding-Top:30px;
        background:#fff;
        padding-bottom:50px;
        .appTop{
            padding:10px 0 20px 0px;
            margin-bottom:30px;
            font-size:36px;
        }
        .note{
            color:#999;
            font-size:12px;
            padding-left:46px;
        }
        .checkImg{
            width:100%;
            height:280px;
            img{
                width:100%;
                height:100%;
            }
        }
        .appTitle{
            padding:40px 0 30px 0px;
            margin-bottom:30px;
            padding-top:10px;
            text-align:center;
            border-bottom:1px solid #ECECEC
        }
        .Top{
            margin-top:80px !important;
            // font-size:24px !important;
        }
        .require{
            color:#999999;
            font-size:14px;
            line-height:30px;
        }
        .offset{
            margin-left:50px;
        }
        .clickImg{
            width:150px;
            height:75px;
            margin:10px 0;
            img{
                width:100%;
                height:100%;
            }
        }
        .imageNote{
            padding-left:48px;
            color:#999999;
            font-size:14px;
        }
        .mTop{
            margin-top:50px;
        }
        .dialog-footer{
            text-align:center;
            padding-bottom:10px;
        }
    }
    .boxTop{
        color:#ff5e2c;
        line-height: 28px;
        padding-bottom: 35px;
        .hotLine{
            color:#ccc;
            font-size:12px;
        }
    }
    
}

</style>
